<template>
	<view class="wrap">
		<view class="content">
			<view class="img_wrap">
				<image :src="Info.bg_image" mode="aspectFill"></image>
			</view>
			<view class="info">
				<view class="title">{{Info.name}}</view>
			</view>
			<view class="detail">
				<!-- <view class="title">内容介绍</view> -->
				<view class="cont" v-html="Info.detail"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onReady,onLoad } from '@dcloudio/uni-app'
	import { ref,onMounted } from 'vue';
	import request from '../../utils/request';
	let id = ref('')
	let Info = ref({})
	let token = ref('')
	onLoad ((options) => {
		id.value = options.id
		token.value=uni.getStorageSync('token')
		getData()
	})
	
	const getData = () => {
		request.post('Competitions/read',{data:{
			id: id.value
		},header:{
			"token":token.value
		}}).then(res=>{
			console.log(res);
			Info.value = res.data
		}).catch(err=>{
			console.log(err);
		})
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: 100vh;
		height: fit-content;
		background-color: #f2f2f2;
		padding: 24rpx;
		box-sizing: border-box;
		
		.content {
			
			.img_wrap {
				width: 100%;
				height: 360rpx;
				background-color: #fff;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.info {
				padding: 24rpx;
				background-color: #fff;
				border-radius: 0 0 20rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 32rpx;
				
				.title {
					font-size: 30rpx;
					font-weight: bold;
				}
			}
			
			.detail {
				padding: 24rpx;
				background-color: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				
				.title {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				
				.cont {
					box-sizing: border-box;
				}
			}
		}
	}
</style>